<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  labelFlex="100px"
  (onSearch)="queryReasetData($event)"
  (onReset)="queryReasetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-4">
  <div class="opera-wrap">
    <button
      nz-button
      nzType="primary"
      [nzLoading]="exportLoading"
      (click)="exportTable()"
    >导出</button>

    <button
      nz-button
      nzType="primary"
      class="m-l-10"
      (click)="showAwardPrizesModal()"
    >发放奖品</button>
  </div>

  <div class="pagination-wrap-position p-t-10">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
    >
      <thead>
        <tr>
          <th
            nzWidth="60px"
            nzLeft
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th nzAlign="center" nzWidth="150px" nzLeft>归属活动</th>
          <th nzAlign="center" nzWidth="120px">用户ID</th>
          <th nzAlign="center" nzWidth="150px">用户手机号</th>
          <th nzAlign="center" nzWidth="150px">奖品</th>
          <th nzAlign="center" nzWidth="170px">中奖时间</th>
          <th nzAlign="center" nzWidth="120px">状态</th>
          <th nzAlign="center" nzWidth="170px">发放时间</th>
          <th nzAlign="center" nzWidth="160px">收款账号</th>
          <th nzAlign="center" nzWidth="150px">真实姓名</th>
          <th nzAlign="center" nzWidth="180px">备注</th>
          <th nzAlign="center" nzWidth="220px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <td
            nzLeft
            [nzDisabled]="[1].includes(data.status)"
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event)"
          ></td>
          <!-- 归属活动 -->
          <td nzAlign="center" nzLeft>{{ data.activityName || '-' }}</td>
          <!-- 用户ID -->
          <td nzAlign="center">
            <a
              nz-button
              nzType="link"
              nzSize="small"
              target="_blank"
              [routerLink]="['/customer/tabs', data.userId, 0]"
            >{{ data.userId }}</a>
          </td>
          <!-- 用户手机号 -->
          <td nzAlign="center">{{ data.phone || '-' }}</td>
          <!-- 奖品 -->
          <td nzAlign="center">{{ data.title || '-' }}</td>
          <!-- 中奖时间 -->
          <td nzAlign="center">{{ data.createTime || '-' }}</td>
          <!-- 状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.status | winPrizeStatus: 'color'}">
              {{ data.status | winPrizeStatus: 'label' }}
            </span>
          </td>
          <!-- 发放时间 -->
          <td nzAlign="center">{{ data.grantTime || '-' }}</td>
          <!-- 收款账号 -->
          <td nzAlign="center">{{ data.alipayAccount || '-' }}</td>
          <!-- 真实姓名 -->
          <td nzAlign="center">{{ data.realName || '-' }}</td>
          <!-- 备注 -->
          <td nzAlign="center">{{ data.note || '-' }}</td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              *ngIf="[0, 2].includes(data.status)"
              nz-button
              nzType="link"
              nzSize="small"
              class="m-r-8"
              (click)="showAwardPrizesModal(data.id)"
            >发放奖品</button>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              (click)="showCollectionModal(data)"
            >{{ data.alipayAccount ? '编辑' : '添加' }}收款信息</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- S 发放奖品 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isAwardPrizesVisible"
  [nzTitle]="'发放奖品'"
  (nzOnCancel)="isAwardPrizesVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <p class="grant-tips">是否将{{ awardPrizesId ? '当前' : '所勾选' }}的记录标记为已发放</p>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">备注</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-textarea-count [nzMaxCharacterCount]="50">
            <textarea
              rows="4"
              nz-input
              maxlength="50"
              placeholder="请输入备注"
              [(ngModel)]="awardPrizesRemark"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isAwardPrizesVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="awardPrizesLoading" (click)="submitAwardPrizesForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 发放奖品 -->

<!-- S 收款信息 -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isCollectionVisible"
  [nzTitle]="(collectionItem?.alipayAccount ? '编辑' : '添加') + '收款信息'"
  (nzOnCancel)="isCollectionVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <form nz-form [formGroup]="collectionForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired>支付宝账号</nz-form-label>
          <nz-form-control [nzSpan]="18" nzErrorTip="请输入支付宝账号!">
            <input
              nz-input
              placeholder="请输入支付宝账号"
              formControlName="alipayAccount"
            />
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired>真实姓名</nz-form-label>
          <nz-form-control [nzSpan]="18" nzErrorTip="请输入账号对应的真实姓名!">
            <input
              nz-input
              placeholder="请输入账号对应的真实姓名"
              formControlName="realName"
            />
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isCollectionVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="collectionLoading" (click)="submitCollectionForm()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 收款信息 -->